<template>
  <div class="auth-container">
    <!-- 背景装饰 -->
    <div class="background-decoration">
      <div class="floating-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
        <div class="shape shape-4"></div>
        <div class="shape shape-5"></div>
        <div class="shape shape-6"></div>
      </div>
      <div class="gradient-overlay"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="auth-content">
      <!-- 左侧信息面板 -->
      <div class="info-panel">
        <div class="brand-section">
          <div class="brand-logo">
            <div class="logo-icon">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <h1 class="brand-title">科研成果管理系统</h1>
            <p class="brand-subtitle">Research Achievement Management System</p>
          </div>

          <div class="feature-highlights">
            <div class="feature-item">
              <div class="feature-icon">
                <el-icon><DataAnalysis /></el-icon>
              </div>
              <div class="feature-content">
                <h3>智能数据分析</h3>
                <p>全面的科研成果统计与分析</p>
              </div>
            </div>

            <div class="feature-item">
              <div class="feature-icon">
                <el-icon><Document /></el-icon>
              </div>
              <div class="feature-content">
                <h3>项目全程管理</h3>
                <p>从申请到结题的完整流程管控</p>
              </div>
            </div>

            <div class="feature-item">
              <div class="feature-icon">
                <el-icon><UserFilled /></el-icon>
              </div>
              <div class="feature-content">
                <h3>多角色协作</h3>
                <p>支持管理员、教师、学生多角色</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧登录表单 -->
      <div class="form-panel">
        <div class="form-container">
          <!-- 表单头部 -->
          <div class="form-header">
            <h2 class="form-title">{{ isLogin ? '欢迎回来' : '创建账户' }}</h2>
            <p class="form-subtitle">
              {{ isLogin ? '请登录您的账户以继续使用' : '填写信息创建您的新账户' }}
            </p>
          </div>

          <!-- 登录/注册切换 -->
          <div class="auth-tabs">
            <button
              :class="['tab-button', { active: isLogin }]"
              @click="switchToLogin"
            >
              登录
            </button>
            <button
              :class="['tab-button', { active: !isLogin }]"
              @click="switchToRegister"
            >
              注册
            </button>
          </div>

          <!-- 登录表单 -->
          <div v-if="isLogin" class="auth-form">
            <el-form
              ref="loginFormRef"
              :model="loginForm"
              :rules="loginRules"
              @submit.prevent="handleLogin"
            >
              <div class="form-group">
                <label class="form-label">用户名</label>
                <div class="input-wrapper">
                  <el-icon class="input-icon"><User /></el-icon>
                  <el-input
                    ref="username"
                    v-model="loginForm.username"
                    placeholder="请输入用户名"
                    size="large"
                    clearable
                  />
                </div>
              </div>

              <div class="form-group">
                <label class="form-label">密码</label>
                <div class="input-wrapper">
                  <el-icon class="input-icon"><Lock /></el-icon>
                  <el-input
                    ref="password"
                    v-model="loginForm.password"
                    :type="passwordType"
                    placeholder="请输入密码"
                    size="large"
                    clearable
                    @keyup.enter="handleLogin"
                  />
                  <button
                    type="button"
                    class="password-toggle"
                    @click="togglePassword"
                  >
                    <el-icon>
                      <component :is="passwordType === 'password' ? 'View' : 'Hide'" />
                    </el-icon>
                  </button>
                </div>
              </div>

              <div class="form-options">
                <el-checkbox v-model="rememberMe">记住我</el-checkbox>
                <a href="#" class="forgot-link">忘记密码？</a>
              </div>

              <el-button
                :loading="loading"
                type="primary"
                size="large"
                class="submit-button"
                @click="handleLogin"
              >
                {{ loading ? '登录中...' : '立即登录' }}
              </el-button>
            </el-form>

            <!-- 快速登录 -->
            <div class="quick-login">
              <div class="divider">
                <span>快速登录</span>
              </div>
              <div class="test-accounts">
                <div
                  v-for="account in testAccounts"
                  :key="account.username"
                  class="test-account-card"
                  @click="fillTestAccount(account.username, account.password)"
                >
                  <div class="account-avatar">
                    <el-icon><component :is="account.icon" /></el-icon>
                  </div>
                  <div class="account-info">
                    <div class="account-name">{{ account.name }}</div>
                    <div class="account-role">{{ account.role }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 注册表单 -->
          <div v-else class="auth-form">
            <el-form
              ref="registerFormRef"
              :model="registerForm"
              :rules="registerRules"
              @submit.prevent="handleRegister"
            >
              <div class="form-row">
                <div class="form-group">
                  <label class="form-label">真实姓名</label>
                  <div class="input-wrapper">
                    <el-icon class="input-icon"><User /></el-icon>
                    <el-input
                      v-model="registerForm.realName"
                      placeholder="请输入真实姓名"
                      size="large"
                      clearable
                    />
                  </div>
                </div>

                <div class="form-group">
                  <label class="form-label">用户名</label>
                  <div class="input-wrapper">
                    <el-icon class="input-icon"><UserFilled /></el-icon>
                    <el-input
                      v-model="registerForm.username"
                      placeholder="请输入用户名"
                      size="large"
                      clearable
                    />
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label class="form-label">邮箱地址</label>
                <div class="input-wrapper">
                  <el-icon class="input-icon"><Message /></el-icon>
                  <el-input
                    v-model="registerForm.email"
                    placeholder="请输入邮箱地址"
                    size="large"
                    clearable
                  />
                </div>
              </div>

              <div class="form-row">
                <div class="form-group">
                  <label class="form-label">密码</label>
                  <div class="input-wrapper">
                    <el-icon class="input-icon"><Lock /></el-icon>
                    <el-input
                      v-model="registerForm.password"
                      type="password"
                      placeholder="请输入密码"
                      size="large"
                      clearable
                    />
                  </div>
                </div>

                <div class="form-group">
                  <label class="form-label">确认密码</label>
                  <div class="input-wrapper">
                    <el-icon class="input-icon"><Lock /></el-icon>
                    <el-input
                      v-model="registerForm.confirmPassword"
                      type="password"
                      placeholder="请确认密码"
                      size="large"
                      clearable
                    />
                  </div>
                </div>
              </div>

              <div class="form-group">
                <label class="form-label">用户角色</label>
                <el-select
                  v-model="registerForm.role"
                  placeholder="请选择用户角色"
                  size="large"
                  style="width: 100%"
                >
                  <el-option label="学生" value="STUDENT" />
                  <el-option label="教师" value="TEACHER" />
                </el-select>
              </div>

              <div class="form-options">
                <el-checkbox v-model="agreeTerms">
                  我已阅读并同意 <a href="#" class="terms-link">用户协议</a> 和 <a href="#" class="terms-link">隐私政策</a>
                </el-checkbox>
              </div>

              <el-button
                :loading="loading"
                type="primary"
                size="large"
                class="submit-button"
                @click="handleRegister"
              >
                {{ loading ? '注册中...' : '立即注册' }}
              </el-button>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, nextTick } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  User,
  Lock,
  View,
  Hide,
  TrendCharts,
  DataAnalysis,
  Document,
  UserFilled,
  Message,
  Management
} from '@element-plus/icons-vue'

export default {
  name: 'AuthPage',
  components: {
    User,
    Lock,
    View,
    Hide,
    TrendCharts,
    DataAnalysis,
    Document,
    UserFilled,
    Message,
    Management
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const route = useRoute()

    // 表单引用
    const loginFormRef = ref()
    const registerFormRef = ref()
    const username = ref()
    const password = ref()

    // 状态管理
    const isLogin = ref(true)
    const passwordType = ref('password')
    const loading = ref(false)
    const rememberMe = ref(false)
    const agreeTerms = ref(false)

    // 登录表单
    const loginForm = reactive({
      username: '',
      password: ''
    })

    // 注册表单
    const registerForm = reactive({
      username: '',
      password: '',
      confirmPassword: '',
      realName: '',
      email: '',
      role: 'STUDENT'
    })

    // 登录验证规则
    const loginRules = reactive({
      username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
      password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
    })

    // 注册验证规则
    const registerRules = reactive({
      username: [
        { required: true, trigger: 'blur', message: '请输入用户名' },
        { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
      ],
      password: [
        { required: true, trigger: 'blur', message: '请输入密码' },
        { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, trigger: 'blur', message: '请确认密码' },
        {
          validator: (rule, value, callback) => {
            if (value !== registerForm.password) {
              callback(new Error('两次输入密码不一致'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      ],
      realName: [{ required: true, trigger: 'blur', message: '请输入真实姓名' }],
      email: [
        { required: true, trigger: 'blur', message: '请输入邮箱地址' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ],
      role: [{ required: true, trigger: 'change', message: '请选择用户角色' }]
    })

    // 测试账户
    const testAccounts = ref([
      {
        username: 'admin',
        password: 'password',
        name: '系统管理员',
        role: '管理员',
        icon: 'Management'
      },
      {
        username: 'teacher1',
        password: 'password',
        name: '张教授',
        role: '教师',
        icon: 'User'
      },
      {
        username: 'student1',
        password: 'password',
        name: '李同学',
        role: '学生',
        icon: 'UserFilled'
      }
    ])

    // 切换登录/注册
    const switchToLogin = () => {
      isLogin.value = true
    }

    const switchToRegister = () => {
      isLogin.value = false
    }

    // 切换密码显示
    const togglePassword = () => {
      passwordType.value = passwordType.value === 'password' ? 'text' : 'password'
      nextTick(() => {
        password.value?.focus()
      })
    }

    // 填充测试账户
    const fillTestAccount = (username, password) => {
      loginForm.username = username
      loginForm.password = password
    }

    // 处理登录
    const handleLogin = () => {
      loginFormRef.value?.validate(async (valid) => {
        if (valid) {
          loading.value = true
          try {
            await store.dispatch('user/login', loginForm)
            ElMessage.success('登录成功！欢迎回来')

            const redirect = route.query.redirect || '/dashboard'
            router.push(redirect)
          } catch (error) {
            console.error('登录失败:', error)
            ElMessage.error(error.message || '登录失败，请检查用户名和密码')
          } finally {
            loading.value = false
          }
        }
      })
    }

    // 处理注册
    const handleRegister = () => {
      if (!agreeTerms.value) {
        ElMessage.warning('请先同意用户协议和隐私政策')
        return
      }

      registerFormRef.value?.validate(async (valid) => {
        if (valid) {
          loading.value = true
          try {
            // 这里应该调用注册API
            // await store.dispatch('user/register', registerForm)
            ElMessage.success('注册成功！请登录您的账户')
            isLogin.value = true

            // 清空注册表单
            Object.keys(registerForm).forEach(key => {
              if (key !== 'role') {
                registerForm[key] = ''
              }
            })
          } catch (error) {
            console.error('注册失败:', error)
            ElMessage.error(error.message || '注册失败，请稍后重试')
          } finally {
            loading.value = false
          }
        }
      })
    }

    return {
      // 表单引用
      loginFormRef,
      registerFormRef,
      username,
      password,

      // 状态
      isLogin,
      passwordType,
      loading,
      rememberMe,
      agreeTerms,

      // 表单数据
      loginForm,
      registerForm,
      loginRules,
      registerRules,
      testAccounts,

      // 方法
      switchToLogin,
      switchToRegister,
      togglePassword,
      fillTestAccount,
      handleLogin,
      handleRegister
    }
  }
}
</script>

<style lang="scss" scoped>
// 现代化登录页面样式
.auth-container {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// 背景装饰
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;

  .gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
      rgba(99, 102, 241, 0.9) 0%,
      rgba(139, 92, 246, 0.8) 25%,
      rgba(59, 130, 246, 0.9) 50%,
      rgba(16, 185, 129, 0.8) 75%,
      rgba(245, 158, 11, 0.9) 100%
    );
    backdrop-filter: blur(10px);
  }

  .floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .shape {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20px);
      animation: float 20s infinite ease-in-out;

      &.shape-1 {
        width: 300px;
        height: 300px;
        top: 10%;
        left: 10%;
        animation-delay: 0s;
      }

      &.shape-2 {
        width: 200px;
        height: 200px;
        top: 60%;
        right: 15%;
        animation-delay: -5s;
      }

      &.shape-3 {
        width: 150px;
        height: 150px;
        bottom: 20%;
        left: 20%;
        animation-delay: -10s;
      }

      &.shape-4 {
        width: 250px;
        height: 250px;
        top: 30%;
        right: 30%;
        animation-delay: -15s;
      }

      &.shape-5 {
        width: 100px;
        height: 100px;
        bottom: 40%;
        right: 10%;
        animation-delay: -7s;
      }

      &.shape-6 {
        width: 180px;
        height: 180px;
        top: 70%;
        left: 60%;
        animation-delay: -12s;
      }
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-20px) rotate(90deg);
    opacity: 0.9;
  }
  50% {
    transform: translateY(-40px) rotate(180deg);
    opacity: 0.5;
  }
  75% {
    transform: translateY(-20px) rotate(270deg);
    opacity: 0.8;
  }
}

// 主要内容区域
.auth-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1400px;
  width: 100%;
  min-height: 80vh;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.2);
  overflow: hidden;
  margin: 20px;
}

// 左侧信息面板
.info-panel {
  background: linear-gradient(135deg,
    rgba(99, 102, 241, 0.95) 0%,
    rgba(139, 92, 246, 0.9) 100%
  );
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
  }

  .brand-section {
    position: relative;
    z-index: 1;
  }

  .brand-logo {
    text-align: center;
    margin-bottom: 60px;

    .logo-icon {
      width: 80px;
      height: 80px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);

      .el-icon {
        font-size: 40px;
        color: white;
      }
    }

    .brand-title {
      font-size: 32px;
      font-weight: 700;
      margin: 0 0 12px 0;
      background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .brand-subtitle {
      font-size: 16px;
      opacity: 0.9;
      margin: 0;
      font-weight: 400;
      letter-spacing: 0.5px;
    }
  }

  .feature-highlights {
    .feature-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 32px;
      padding: 20px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.15);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      }

      .feature-icon {
        width: 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        flex-shrink: 0;

        .el-icon {
          font-size: 24px;
          color: white;
        }
      }

      .feature-content {
        h3 {
          font-size: 18px;
          font-weight: 600;
          margin: 0 0 8px 0;
          color: white;
        }

        p {
          font-size: 14px;
          margin: 0;
          opacity: 0.9;
          line-height: 1.5;
        }
      }
    }
  }
}

// 右侧表单面板
.form-panel {
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: white;
}

.form-container {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

.form-header {
  text-align: center;
  margin-bottom: 40px;

  .form-title {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 12px 0;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .form-subtitle {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
  }
}

// 登录/注册切换标签
.auth-tabs {
  display: flex;
  background: #f3f4f6;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 32px;

  .tab-button {
    flex: 1;
    padding: 12px 24px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;

    &.active {
      background: white;
      color: #6366f1;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    &:hover:not(.active) {
      color: #374151;
    }
  }
}

// 表单样式
.auth-form {
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .form-group {
    margin-bottom: 24px;

    .form-label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: #374151;
      margin-bottom: 8px;
    }

    .input-wrapper {
      position: relative;

      .input-icon {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        font-size: 18px;
        z-index: 2;
      }

      :deep(.el-input) {
        .el-input__wrapper {
          padding-left: 48px;
          border: 2px solid #e5e7eb;
          border-radius: 12px;
          box-shadow: none;
          transition: all 0.3s ease;
          background: #fafafa;

          &:hover {
            border-color: #d1d5db;
            background: white;
          }

          &.is-focus {
            border-color: #6366f1;
            background: white;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
          }

          .el-input__inner {
            font-size: 15px;
            color: #1f2937;

            &::placeholder {
              color: #9ca3af;
            }
          }
        }
      }

      .password-toggle {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #9ca3af;
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
        transition: all 0.2s ease;

        &:hover {
          color: #6366f1;
          background: rgba(99, 102, 241, 0.1);
        }

        .el-icon {
          font-size: 18px;
        }
      }
    }
  }

  .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    font-size: 14px;

    :deep(.el-checkbox) {
      .el-checkbox__label {
        color: #6b7280;
        font-size: 14px;
      }

      .el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #6366f1;
        border-color: #6366f1;
      }
    }

    .forgot-link, .terms-link {
      color: #6366f1;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s ease;

      &:hover {
        color: #4f46e5;
        text-decoration: underline;
      }
    }
  }

  .submit-button {
    width: 100%;
    height: 48px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.3);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px 0 rgba(99, 102, 241, 0.4);
    }

    &:active {
      transform: translateY(0);
    }

    &.is-loading {
      opacity: 0.8;
    }
  }
}

// 快速登录区域
.quick-login {
  margin-top: 32px;

  .divider {
    position: relative;
    text-align: center;
    margin-bottom: 24px;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background: #e5e7eb;
    }

    span {
      background: white;
      padding: 0 16px;
      color: #9ca3af;
      font-size: 14px;
      font-weight: 500;
    }
  }

  .test-accounts {
    display: grid;
    gap: 12px;

    .test-account-card {
      display: flex;
      align-items: center;
      padding: 16px;
      border: 2px solid #f3f4f6;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: #fafafa;

      &:hover {
        border-color: #6366f1;
        background: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
      }

      .account-avatar {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;

        .el-icon {
          font-size: 20px;
          color: white;
        }
      }

      .account-info {
        .account-name {
          font-size: 14px;
          font-weight: 600;
          color: #1f2937;
          margin-bottom: 2px;
        }

        .account-role {
          font-size: 12px;
          color: #6b7280;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .auth-content {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 10px;
  }

  .info-panel {
    display: none;
  }

  .form-panel {
    padding: 40px 30px;
  }
}

@media (max-width: 640px) {
  .auth-content {
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
  }

  .form-panel {
    padding: 30px 20px;
  }

  .form-container {
    max-width: none;
  }

  .form-header {
    margin-bottom: 30px;

    .form-title {
      font-size: 24px;
    }

    .form-subtitle {
      font-size: 14px;
    }
  }

  .auth-form {
    .form-row {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-options {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
  }

  .quick-login {
    margin-top: 24px;

    .test-accounts {
      .test-account-card {
        padding: 12px;

        .account-avatar {
          width: 36px;
          height: 36px;

          .el-icon {
            font-size: 18px;
          }
        }
      }
    }
  }

  .background-decoration {
    .floating-shapes {
      .shape {
        display: none;
      }
    }
  }
}

// 动画增强
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.auth-content {
  animation: slideInUp 0.6s ease-out;
}

.info-panel {
  animation: slideInLeft 0.8s ease-out;
}

.form-panel {
  animation: slideInUp 0.8s ease-out 0.2s both;
}

// 深色模式支持
@media (prefers-color-scheme: dark) {
  .auth-content {
    background: rgba(31, 41, 55, 0.95);
  }

  .form-panel {
    background: #1f2937;
  }

  .form-header {
    .form-title {
      color: #f9fafb;
    }

    .form-subtitle {
      color: #d1d5db;
    }
  }

  .auth-tabs {
    background: #374151;

    .tab-button {
      color: #d1d5db;

      &.active {
        background: #4b5563;
        color: #6366f1;
      }
    }
  }

  .auth-form {
    .form-group {
      .form-label {
        color: #f3f4f6;
      }

      .input-wrapper {
        :deep(.el-input) {
          .el-input__wrapper {
            background: #374151;
            border-color: #4b5563;

            &:hover {
              border-color: #6b7280;
              background: #4b5563;
            }

            &.is-focus {
              background: #4b5563;
            }

            .el-input__inner {
              color: #f9fafb;

              &::placeholder {
                color: #9ca3af;
              }
            }
          }
        }
      }
    }
  }

  .quick-login {
    .divider {
      &::before {
        background: #4b5563;
      }

      span {
        background: #1f2937;
        color: #9ca3af;
      }
    }

    .test-accounts {
      .test-account-card {
        background: #374151;
        border-color: #4b5563;

        &:hover {
          background: #4b5563;
        }

        .account-info {
          .account-name {
            color: #f9fafb;
          }

          .account-role {
            color: #d1d5db;
          }
        }
      }
    }
  }
}
</style>
